<template>
 <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待抢" name="first" >
          <div class="takelist" v-for="item in OrderList" :key="item.id">
            <div class="distance_time">
              <div class="distance">
                <span>1.45千米</span>
                <span>距离</span>
              </div>
              <div class="time">
                <span>{{item.pay_time}}</span>
                <span>下单时间</span>
              </div>
            </div>
            <ul class="listform">
              <li>
                <span>订货号:</span>
                <span style="padding-left:0.5rem">{{item.order_num}}</span>
              </li>
              <li>
                <span>物品:</span>
                <span style="padding-left:0.8rem" v-for="god in item.goods" :key="god.name" >{{god.name}}</span>
              </li>
              <li>
                <span>取货地址：</span>
                <span>{{item.take_add}}</span>
              </li>
              <li>
                <span>送货地址：</span>
                <span>{{item.address}}</span>
              </li>
              <li>
                <span>配送费用：</span>
                <span>￥{{item.freight}}</span>
              </li>
            </ul>
            <el-button style="margin-top:0.5rem" type="success" class="outbtn" v-on:click='Grabasingle()'>我要抢单</el-button>
          </div>
          <!--暂无订单-->
          <div class="nullorder" v-if="hid_data">
            <span class="iconfont" style="font-size:0.5rem">&#xe62e;</span>
            {{noorder}}
          </div>
        </el-tab-pane>
        <el-tab-pane label="待取货" name="second">
            <orderlist style="padding-bottom:1rem" :btntext="btn_text[0]" :hidden_btn='hidden_btn' :waitOrder='waitTakeOrder'></orderlist>
            <div class="nullorder" v-if="hid_data">
              <span class="iconfont" style="font-size:0.5rem">&#xe62e;</span>
              {{noorder}}
          </div>
        </el-tab-pane>
        <el-tab-pane label="配送中" name="third">
            <orderlist style="padding-bottom:1rem" :btntext="btn_text[1]" :hidden_btn='hidden_btn' :waitOrder='waitTakeOrder'></orderlist>
          <div class="nullorder" v-if="hid_data">
            <span class="iconfont" style="font-size:0.5rem">&#xe62e;</span>
            {{noorder}}
          </div>
        </el-tab-pane>
        <el-tab-pane label="配送成功" name="fourth">
          <orderlist style="padding-bottom:1rem" :hidden_btn='hidden_btn' :waitOrder='waitTakeOrder'></orderlist>
          <div class="nullorder" v-if="hid_data">
            <span class="iconfont" style="font-size:0.5rem">&#xe62e;</span>
            {{noorder}}
          </div>
      </el-tab-pane>
    </el-tabs>
 </div>
</template>
<script>
import orderlist from '@/components/orderlist'
// 得到存在本地的用户名
var phone = localStorage.getItem('currentUser_name')
if (phone === '' || phone === null) {
  phone = this.$store.state.mobile
}
export default {
  components: {
    orderlist
  },
  data () {
    return {
      activeName: 'first',
      fullscreenLoading: false,
      btn_text: ['开始配送', '配送成功'],
      hidden_btn: 1,
      OrderList: {},
      waitTakeOrder: {},
      noorder: '暂无数据',
      hid_data: false
    }
  },
  methods: {
    /* 标签栏切换 */
    handleClick (tab, event) {
      if (this.activeName === 'first') {
        this.getformlist()
      }
      if (this.activeName === 'second') {
        /** 加载待取货列表 */
        this.$axios({
          url: '/api.php/Index/index?action=waitTakeOrder&&mobile=' + phone,
          method: 'get'
        }).then(res => {
          let data = res.data
          this.waitTakeOrder = data
          if (this.waitTakeOrder.length > 0) {
            this.hid_data = false
          } else {
            this.hid_data = true
          }
        })
      }
      if (this.activeName === 'third') {
        this.$axios({
          url: '/api.php/Index/index?action=scrambleOrderList&&mobile=' + phone,
          method: 'get'
        }).then(res => {
          let data = res.data
          this.waitTakeOrder = data
          if (this.waitTakeOrder.length > 0) {
            this.hid_data = false
          } else {
            this.hid_data = true
          }
        })
      }
      if (this.activeName === 'fourth') {
        /** 加载配送成功列表 */
        console.log('这是配送中列表')
        this.$axios({
          url: '/api.php/Index/index?action=successOrder&&mobile=' + phone,
          method: 'get'
        }).then(res => {
          let data = res.data
          this.waitTakeOrder = data
          if (this.waitTakeOrder.length > 0) {
            this.hid_data = false
          } else {
            this.hid_data = true
          }
        })
        this.hidden_btn = false
      } else {
        this.hidden_btn = true
      }
    },
    /* 加载抢单列表数据 */
    getformlist () {
      // 取出store中的手机号
      this.$axios({
        url: '/api.php/Index/index?action=scrambleOrderList&&mobile=' + phone,
        method: 'get'
      }).then(res => {
        let data = res.data
        this.OrderList = data
        if (this.OrderList.length > 0) {
          this.hid_data = false
        }
      })
    },
    /** 抢单操作 */
    Grabasingle () {
      let orderform = this.OrderList.order_num
      this.$axios({
        url: '/api.php/Index/index?action=scramble',
        params: {
          order_num: orderform
        }
      }).then(res => {
        let msg = res.data.message
        this.openmesg(msg)
      })
    },
    /** 消息提示 */
    openmesg (msg) {
      this.$message({
        message: msg,
        type: 'success'
      })
    }
  },
  created: function () {
    this.getformlist()
  }
}
</script>
<style lang="stylus">
  .tabs
    padding-left 0.2rem
  .el-tabs>.el-tabs__header>.el-tabs__nav-wrap
    padding-left 0.8rem !important
  .mybtn
    margin-top 0.5rem
    display flex
    justify-content space-around
  .takelist
    width 95%
    background #ffffff
    padding 0.4rem
    margin 0 auto
    text-align center
    font-size 0.3rem
    .distance_time
      width 100%
      display flex
      justify-content space-around
      .distance,.time
        display flex
        flex-direction column
        justify-content center
      .distance>span,.time>span
        margin-top .2rem
        text-align center
      .distance>span:nth-child(1),.time>span:nth-child(1)
        color green
        font-size .3rem
    .listform
      margin-top 0.4rem
      text-align left
      padding-left 0.5rem
    .listform>li
      margin-top .1rem
      word-wrap: break-word
  .outbtn
    width 6.6rem
    font-size 0.36rem
    margin 0.25rem auto 0
  .nullorder
    text-align center
    font-size 0.4rem
    color #666
    height 8rem
    line-height 8rem
</style>
